<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
       background-color: #f3f7f6;
    }
   .box{
    width: 300px;
    height: 400px;
    border: 1px solid white;
    box-shadow: 2px 2px 3px #888888;
    margin: 0 auto;
   }
   .top {
     width: 100%;
     height: 100px;
     background-size: cover;
     background-position: center -70px;
     background-repeat: no-repeat;
     background-image: url("./img/5.png");
   }
   .top1{
     width: 100%;
     height: 100px;
     float: left;
    background-color: rgb(86, 177, 232,0.5);
   }
   .bottom{
     width: 250px;
     height: 100px;
     margin: 0 auto;
     border-top: 1px solid #eeeeee;
   }
   p{
     text-align: center;
     line-height: 20px;
   }
   .a{
     width: 50px;
     height: 100px;
     float: left;
     margin-left: 20px;
   }
   .p1{
     font-size: 20px;
     font-weight: bold;
   }
   .p2{
     font-size: 15px;
     color: #868b8c;
   }
   .cire{
     width: 100px;
     height: 100px;
     margin: 150px auto;
     border-radius: 50%;
     background-size: cover;
    background-image: url("./img/5.png");
   }
  </style>
</head>
<body>
<div class="box">
  <div class="top1"></div>
  <div class="top"></div>
<!--  <div class="center">-->
    <p style="font-weight: bold;margin-top: 60px">张哓华</p>
    <p style="color: #868b8c;font-size: 13px">高级UI设计师</p>
    <p>专注用户体验设计，5年行业经验，热爱创造美观实用的界面</p>
<!--  </div>-->
  <div class="bottom">
    <div class="a"><p class="p1">248</p><p class="p2">作品</p></div>
    <div class="a"><p class="p1">1.2k</p><p class="p2">粉丝</p></div>
    <div class="a"><p class="p1">86</p><p class="p2">点赞</p></div>
  </div>
</div>
<div class="cire"></div>
</body>
</html>